<template>
  <div>
    <!--MVideoList-->
    <div class="list">
      <el-row :gutter="10">
        <el-col
          class="colheight"
          :span="8"
          v-for="(item, index) in videoList"
          :key="index"
        >
          <el-card class="card" justify="center" align="middle" shadow="hover">
            <img class="cover" :src="item.cover_img" />
            <div justify="center" align="middle">
              <router-link
                class="routerlink"
                :to="{
                  path: '/goodsdetail',
                  query: { video_id: item.id },
                }"
              >
                <!-- <el-tag type="info" effect="plain">{{ item.id }}: {{ item.title }}</el-tag> -->
                <el-link :underline="false" class="text"
                  >{{ item.id }}: {{ item.title }}</el-link
                ></router-link
              >
              <p>
                <el-tag type="warning"
                  ><i class="el-icon-coin"></i>&nbsp;{{
                    item.price / 100
                  }}</el-tag
                >
              </p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    videoList: {
      type: Array,
      required: true,
    },
  },
};
</script>

<!--SCSS是⼀种CSS预处理语⾔, scoped 是指这个scss样式 只作⽤于当前组件-->
<style scoped>
.colheight:nth-child(3n+1) {
  clear: left;
}
.card {
  max-width: 390px;
  margin-bottom: 10%;
  /* max-height: 390px; */
}
.cover {
  border-radius: 10px;
  max-width: 390px;
  width: 100%;
}
.text {
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.routerlink {
  text-decoration: none;
}
</style>